<template>
  <li>
    <div v-if="model.value!=='root' || model.name" class="bold" @click.stop="toggle">
      <div :class="['option-wapper', !isWhite ? 'option-wapper__no-white':'']">
        <div class="input-wapper">
          <el-input :title="model.value" class="no-border" :placeholder="$t('public.pleaseInput')" :disabled="!isWhite" @blur="validate(model.value)" v-model="model.value"></el-input>
        </div>
        <div class="other-wapper" >
          <el-checkbox v-if="model.fatalName" :disabled="!isWhite" @change="getChecked" v-model="model.fatalValue"></el-checkbox>
        </div>
        <div class="icon-wapper"><i class="el-icon-arrow-right"></i><i class="el-icon-close" v-show="isWhite" @click.stop="delChild"></i></div>
      </div>
    </div>
    <ul class="next">
      <div class="li-wapper">
        <item ref="model" @del="realDelChlidData" :class="['item', model.name==='root'?'first-level':'']" @checked="addChecked" v-for="model in model.child" :model="model" :isWhite="isWhite">
        </item>
        <li v-show="isWhite" class="add" @click="addChild"><el-button :disabled="!isWhite" type="text">{{$t('configLazyLoad.qualityCheck.addItem')}}</el-button></li>
        <li v-show="!isWhite && model.child && model.child.length > 0" class="lastline" @click="addChild"></li>
      </div>
      <div class="non-fatal-wapper" v-if="nonFatal">
          {{$t('configLazyLoad.qualityCheck.numberOfNotKey')}}: <el-input v-if="isWhite" class="non-fatal" :maxlength="2" size="mini"  v-model="Non_Fatal"></el-input>
          <el-input v-else class="non-fatal" :disabled="!isWhite" :maxlength="2" size="mini"  v-model="showNon_Fatal"></el-input>
      </div>
    </ul>
  </li>
</template>

<script>
  export default {
    name: 'item',
    props: {
      isWhite: {
        type: Boolean,
        default: true
      },
      levelCount: Number,
      model: Object
    },
    data () {
      return {
        checkedCount: '',
        value: '',
        level: 1,
        Non_Fatal: 0
      }
    },
    watch: {
      Non_Fatal (cur) {
        if (this.nonFatal) {
          this.model.child.forEach(item => {
            if (item.Non_Fatal !== undefined) {
              item.Non_Fatal = this.Non_Fatal
            }
          })
        }
      },
      model (cur) {
        if (cur && cur.child.length === 0) {
          this.level = 1
        }
      }
    },
    computed: {
      showNon_Fatal () {
        let Non = 0
        if (this.nonFatal) {
          this.model.child.forEach(item => {
            if (item.Non_Fatal !== undefined) {
              Non = item.Non_Fatal
              return false
            }
          })
        }
        return Non
      },
      nonFatal () {
        if (this.model.name) {
          return this.model.name.match(/^config_name_([0-9]|[1][0-9]|[2][0])$/)
        } else {
          return false
        }
      }
    },
    methods: {
      addChecked () {
        this.checkedCount = 0
        this.model.child.forEach(item => {
          if (item.fatalValue) {
            this.checkedCount++
          }
        })
      },
      getChecked () {
        if (this.model.fatalValue) {
          this.$emit('checked')
        }
      },
      toggle (event) {
        let cur = event.currentTarget
        this.$nextTick(() => {
          let targets = cur.parentElement.parentElement.querySelectorAll('.li-wapper .item')
          targets = cur.parentElement.parentElement.childNodes
          for (let i = 0; i < targets.length; i++) {
            if (targets[i].className !== 'add') {
              targets[i].setAttribute('class', 'item')
            }
          }
          cur.parentElement.setAttribute('class', 'item active')
        })
      },
      validate (data) {
        if (!data) {
          this.$message.error(this.$t('configLazyLoad.qualityCheck.qualityItemNameIsRequired'))
          this.model.value = this.value
        }
      },
      realDelChlidData (childModel) {
        let child = this.model.child.filter(item => {
          return item.name !== childModel.name
        })
        this.$set(this.model, 'child', child)
      },
      delChild () {
        this.$confirm(this.$t('configLazyLoad.qualityCheck.deleteConfirm'), this.$t('configLazyLoad.qualityCheck.deleteTips'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn',
          type: 'warning'
        }).then(() => {
          this.$emit('del', this.model)
          this.$message({
            type: 'success',
            message: this.$t('agent.successDel')
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('config.agent.cancelDel')
          })
        })
      },
      addChild () {
        if (!this.isWhite) return null
        this.$emit('add', this.model)
        if (this.model.child.length > 19) {
          this.$message.error(this.$t('configLazyLoad.qualityCheck.maxAddNum', {num: 20}))
          return null
        }
        if (this.model.name && this.model.name.split('-').length > 9) {
          this.$message.error(this.$t('configLazyLoad.qualityCheck.maxAddNum', {num: 10}))
          return null
        }
        if (!this.model.child) {
          this.$set(this.model, 'child', [])
          return null
        }
        let parentName = this.model.name
        let parentValue = this.model.value
        let parentFatalName = 'configNameFatal_'
        if (!this.model.name) {
          this.model.child.push({
            order: this.level,
            name: 'config_name_' + this.level,
            value: this.$t('public.qualityCheck') + this.level,
            child: []
          })
          parentFatalName = 'configNameFatal_' + this.level
          this.level++
          this.$set(this.$data, 'checkedCount', 0)
          return null
        } else if (!this.model.fatalName && this.nonFatal) {
          this.model.child.push({
            order: this.level,
            name: parentName + '-' + this.level,
            value: parentValue + '-' + this.level,
            child: [],
            Non_Fatal: this.Non_Fatal,
            fatalName: parentFatalName + this.model.order + '-' + this.level,
            fatalValue: false
          })
          this.level++
          return null
        } else {
          this.model.child.push({
            order: this.level,
            name: parentName + '-' + this.level,
            value: parentValue + '-' + this.level,
            child: []
          })
          this.level++
          return null
        }
      }
    },
    beforeMount () {
      this.value = this.model.value
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../../assets/common.styl"
  .item
    cursor pointer
  .bold
    font-weight bold
  .next
    padding-left 0em
    line-height 1.5em
    list-style dot
    position absolute
    display none
    top 0
    left 180px
    width 154px
    .li-wapper
      /*margin-top 20px*/
      .lastline
        border-bottom 1px solid #999
        height 0
      .item
        border-left 1px solid #999
        border-right 1px solid #999
        &:first-child
          border-top 1px solid #999
  .next
    &:first-child
      display block
  #level-root li > ul
    display none
  #level-root>li.item>ul
    left 0
    display block
  #level-root li.active >ul,
  #level-root li ul li
    display block
  .icon-wapper
    padding-right 2px
  #level-root li > .bold > .option-wapper
    .icon-wapper
      .el-icon-close
        display none
      .el-icon-arrow-right
        color $cf-level3
        display inline
  .option-wapper
    display flex
    align-items center
    .other-wapper
      margin-right 6px
  .option-wapper__no-white
    background #f5f7fa

  .add
    border 1px solid $c-main
    background #f5fffe
    /*text-align center*/
    padding-left 10px
  .active
    background $c-main
  .non-fatal-wapper
    color $cf-level3
    margin-top 16px
  .non-fatal
    width 56px
  .el-button
    background #f5fffe
  #level-root li.active > .bold > .option-wapper
    background $c-main
    .icon-wapper
      .el-icon-close
        color #fff
        display inline
      .el-icon-arrow-right
        display none
  #level-root li:hover > .bold > .option-wapper
    background $c-main
    .icon-wapper
      .el-icon-close
        color #fff
        display inline
      .el-icon-arrow-right
        display none
</style>
